<template>
  <div>
    <div class="masage">
      <div class="rank_song_info">
        <div class="img_i">
          <img :src="this.$route.query.img" alt="" />
          <span class="iconfont icon-gantanhaozhong"></span>
        </div>
        <div class="right_text">
          <h4>{{ this.$route.query.name }}</h4>
          <span class="time"
            >{{ this.$route.query.time }}
            <span class="iconfont icon-jiantouxia"></span
          ></span>
          <div class="operate">
            <a href=""><span class="iconfont icon-24gl-play"></span> 播放</a>
            <a href=""><span class="iconfont icon-xiazai"></span> 下载</a>
            <a href=""
              ><span class="iconfont icon-ic_batch_default24px">
                批量操作</span
              ></a
            >
          </div>
        </div>
      </div>
    </div>
    <song_list
      :singer_song="
        this.$route.query.album ? album_song_list : special_song_list
      "
    ></song_list>
  </div>
</template>

<script>
import { mapState } from "vuex";
import song from "@/store/song";
export default {
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      if (this.$route.query.album) {
        await this.$store.dispatch("album_song", this.$route.query.album);
      } else if (this.$route.query.special) {
        await this.$store.dispatch("special_song", this.$route.query.special);
      }
    },
  },
  computed: {
    ...mapState({
      album_song_list: (state) => state.song.album_song,
      special_song_list: (state) => state.song.special_songList,
    }),
  },
};
</script>

<style lang="less">
.rank_song_info {
  display: flex;
  margin-top: 30px;
  margin-bottom: 25px;
  .img_i {
    flex: 2;
    position: relative;
    margin-right: 20px;
    img {
      //   background: url(../public/images/封面.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      opacity: 0.99;
      border-radius: 8px;
    }
    span {
      position: absolute;
      left: 5px;
      bottom: 10px;
      color: #fff;
      font-size: 30px;
    }
  }

  .right_text {
    flex: 8;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    h4 {
      font-size: 20px;
    }
    .time {
      font-size: 18px;
      -webkit-transform: scale(0.8);
      position: absolute;
      top: 70px;
      left: -75px;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*限制文本行数*/
      -webkit-box-orient: vertical;
    }
    .operate {
      display: flex;
      width: 490px;
      justify-content: space-between;
      a:nth-child(1) {
        background-color: #00a9ff;
        color: #fff;
      }
      a {
        text-align: center;
        line-height: 40px;
        height: 40px;
        width: 140px;
        background-color: rgb(234, 231, 231);
        font-size: 16px;
        border-radius: 20px;
        span {
          font-size: 20px;
        }
      }
    }
  }
}
</style>